(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
  typeof define === 'function' && define.amd ? define(['jquery'], factory) :
  global.animationControl = factory($);
}(this, function ($) { 'use strict';

  const FRAME60 = 1000 / 60;

  var animationControl = function(option) {
    var $el = $('<div class="l-animation-control">')

    var $processFill = $('<div class="l-process-fill">')
    var $processControlPoint = $('<div class="l-process-control-point">')

    var $firstFrameBtn = $('<a class="l-control-btn l-control-first-frame"><i class="l-control-icon"></a>')
    var $lastFrameBtn = $('<a class="l-control-btn l-control-last-frame"><i class="l-control-icon"></a>')
    var $previousFrameBtn = $('<a class="l-control-btn l-control-previous-frame"><i class="l-control-icon"></a>')
    var $nextFrameBtn = $('<a class="l-control-btn l-control-next-frame"><i class="l-control-icon"></a>')
    var $playBtn = $('<a class="l-control-btn l-control-play"><i class="l-control-icon"></a>')
    var $stopBtn = $('<a class="l-control-btn l-control-stop"><i class="l-control-icon"></a>')

    $playBtn.on('click', function() {
      if ($(this).hasClass('l-control-pause')) {
        $(this).removeClass('l-control-pause').addClass('l-control-play')
      } else {
        $(this).removeClass('l-control-play').addClass('l-control-pause')
      }
    })

    $el
      .append(
        $('<div class="l-process-wrap">')
          .append($('<div class="l-process-slot">'))
          .append($processFill)
          .append($processControlPoint)
      )
      .append(
        $('<div class="l-control-wrap">')
          .append($firstFrameBtn)
          .append($previousFrameBtn)
          .append($playBtn)
          .append($nextFrameBtn)
          .append($lastFrameBtn)
          .append($stopBtn)
      )

    return $el;
  }

  return animationControl

}))
